<template>
  <admin-container>
    <!--按钮组-->
    <div class="button-group">
      <el-button type="primary" @click="addArtcie" size="small" icon="el-icon-plus">添加新闻</el-button>
      <el-button type="danger" size="small" icon="el-icon-delete" @click="handleBatchDelete"
        :disabled="allowBatchDeletion">批量删除</el-button>
    </div>
    <!-- 筛选条件 -->
    <el-form :inline="true" size="small" :model="searchForm" class="search-form">
      <el-form-item label="新闻类目">
        <el-select style="width: 100px;" v-model="searchForm.category" placeholder="请选择">
          <el-option label="全部" :value="0"></el-option>
          <el-option label="公司新闻" :value="1"></el-option>
          <el-option label="行业新闻" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="searchForm.keyword" placeholder="新闻标题搜索" style="width: 250px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :table-header-props="{ disabled: true }" :data="tableData" border size="small"
      @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" label="操作" width="130px">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)"><i class="fa fa-edit"></i> 编辑</el-button>
          <el-button type="text" class="danger" @click="handleDelete(scope.row)"><i class="fa fa-trash-o"></i>
            删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="显示" align="center" width="100px">
        <template slot-scope="scope">
          <el-switch @change="changeDisplay(scope.row)" v-model="scope.row.display" inactive-color="#e7e7e7">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="标题 \ Ttile">
        <template slot-scope="scope">
          <div class="ellipsis">
            <b>{{ scope.row.title }}</b>
            <div>{{ scope.row.titleEn }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="新闻类别" align="center" width="110px">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.category | categoryStr }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="author" label="作者" width="100px"></el-table-column>
      <el-table-column prop="modifiedDate" align="center" label="更新时间" width="120px"></el-table-column>
      <el-table-column prop="createDate" align="center" label="创建时间" width="120px"></el-table-column>
    </el-table>
    <div class="page-tool">
      <el-pagination background layout="prev, pager, next" :page-size="searchForm.pageSize"
        :current-page="searchForm.pageIndex" :total="searchForm.pageTotal" @current-change="changePageIndex">
      </el-pagination>
    </div>
  </admin-container>
</template>

<script>
import AdminContainer from '@/components/Admin/AdminContainer.vue';
import * as articleApi from '@/api/admin/articleApi';
export default {
  components: {
    AdminContainer
  },
  data () {
    return {
      searchForm: {
        category: 0,
        keyword: "",
        pageIndex: 0,
        pageSize: 20,
        pageTotal: 0
      },
      tableData: [],
      artcieSelection: [],
      allowBatchDeletion: true,
    }
  },
  methods: {
    // 获取文章列表
    getArticleList () {
      var self = this;
      articleApi.getAllArticles(self.searchForm.pageIndex, self.searchForm.pageSize, self.searchForm.category, self.searchForm.keyword)
        .then(res => {
          if (res.code == 200) {
            self.tableData = res.data.data;
            self.searchForm.pageIndex = res.data.pageIndex;
            self.searchForm.pageSize = res.data.pageSize;
            self.searchForm.pageTotal = res.data.toalNumber;
          }
        })
    },
    handleSearch () {
      this.getArticleList()
    },
    handleEdit (row) {
      // 编辑文章，跳转到编辑页面
      this.$router.push({
        path: '/management/Artcie/Form',
        query: {
          id: row.id,
        }
      })
    },
    handleDelete (row) {
      // 删除文章
      var self = this;
      self.$confirm(`是否确定删除文章?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        articleApi.deleteArticleById(row.id)
          .then(res => {
            if (res.code == 200) {
              self.$message({
                message: '删除成功！',
                type: 'success'
              });
              self.getArticleList()
            }
            else if (res.code == 500) {
              self.$message.error('接口发生错误');
            }
          })
          .catch(err => {
            self.$message.error('接口发生错误');
          });
      });
    },
    handleSelectionChange (val) {
      var self = this;
      self.artcieSelection = [];
      val.some((item) => {
        self.artcieSelection.push(item.id);
      });
      self.allowBatchDeletion = !(val.length !== 0);
    },
    handleBatchDelete () {
      var self = this;
      if (self.artcieSelection.length === 0) {
        self.$alert('至少选中一条需要删除的文章', '错误', {
          confirmButtonText: '确定',
          type: "error"
        });
        return;
      }

      if (self.allowBatchDeletion) {
        self.$alert('批量删除功能已禁用！', '错误', {
          confirmButtonText: '确定',
          type: "error"
        });
        return;
      }
      self.$confirm(`是否确定批量删除${(self.artcieSelection.length)}条数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        articleApi.deleteBatchArticle(self.artcieSelection)
          .then(res => {
            if (res.code == 200) {
              self.$message({
                message: '删除成功！',
                type: 'success'
              });
              self.getArticleList()
            }
            else if (res.code == 500) {
              self.$message.error('接口发生错误');
            }
          })
          .catch(err => {
            self.$message.error('接口发生错误');
          });
      });
    },
    changePageIndex (num) {
      var self = this;
      self.searchForm.pageIndex = num;
      self.getArticleList();
    },
    addArtcie () {
      this.$router.push('/management/Artcie/Form')
    },
    changeDisplay (row) {
      var self = this;
      articleApi.changeDisplay(row.id, row.display)
        .then(res => {
          if (res.code == 200) {
            self.$message({
              message: '状态改变成功！',
              type: 'success'
            });
          }
          else if (res.code == 200) {
            self.$message.error(res.exception);
          }
        })
        .catch(err => {
          self.$message.error('接口发生错误');
        });
    }
  },
  filters: {
    categoryStr (value) {
      switch (value) {
        case 1:
          return "公司新闻";
          break;
        case 2:
          return "行业新闻";
          break;
      }
    }
  },
  mounted () {
    var self = this;
    self.getArticleList()
  }
}
</script>

<style scoped>
.button-group {
  margin-bottom: 10px;
  border-bottom: 1px solid #F2F6FC;
  padding-bottom: 10px;
}

.page-tool {
  margin-top: 20px;
}

.danger {
  color: #F56C6C;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

.el-button+.el-button {
  margin-left: 1px;
}
</style>